// 下拉框
export const addSelect = (editor) => {
  const {
    Components
  } = editor;
  Components.addType('select', {
    model: {
      defaults: {
        name: 'select',
        type: 'div',
        attributes: { class: 'select' },
        // droppable: false,
        components: [
          // 选择栏标题
          {
            type: 'div',
            attributes: { class: 'selectTitle' },
            components: [
              {
                type: 'text',
                content: '开发服务',
              },
              {
                type: 'div',
                attributes: { class: 'iconDiv' },
                components: [{
                  type: 'div',
                  attributes: { class: 'icon' }
                },
                {
                  type: 'div',
                  attributes: { class: 'icon' }
                },
                ]
              },
            ],
          },
          // 选择栏内容
          {
            type: 'div',
            attributes: { class: 'selectBody allowAll' },
            components: [
              {
                type: 'div',
                attributes: { 
                  class: 'select-secondItems',
                  'data-value':'1', 
                },
                components: [
                  {
                    type: 'div',
                    attributes: { class: 'allowAll arrow arrow-right' },
                    components: [
                      {
                        type: 'text',
                        content: '全部',
                        attributes: { class: ' unselected' },
                        'data-value': '1',
                      },
                    ]
                  },
                  {
                    type: 'div',
                    attributes: { class: 'select-items allowAll' },
                    components: [
                      {
                        type: 'div',
                        content: '自研产品',
                        attributes: { 
                          class: 'unselected',
                          'data-value': '1-1'
                        },  
                      },
                      {
                        type: 'div',
                        content: '研发产品',
                        attributes: { 
                          class: 'unselected',
                          'data-value': '1-2'
                        },    
                      },
                      {
                        type: 'div',
                        content: '未分类',
                        attributes: {
                           class: 'unselected',
                           'data-value': '1-3' 
                          }, 
                      }
                    ]
                  }
                ]
              },
              {
                type: 'div',
                attributes: { 
                  class: 'select-secondItems',
                  'data-value':'1', 
                },
                components: [
                  {
                    type: 'div',
                    attributes: { class: 'allowAll arrow arrow-right' },
                    components: [
                      {
                        type: 'text',
                        content: '其他',
                        attributes: { class: ' unselected' },
                        'data-value': '1',
                      },
                    ]
                  },
                  {
                    type: 'div',
                    attributes: { class: 'select-items allowAll' },
                    components: [
                      {
                        type: 'div',
                        content: '自研产品',
                        attributes: { 
                          class: 'unselected',
                          'data-value': '1-1'
                        },  
                      },
                      {
                        type: 'div',
                        content: '研发产品',
                        attributes: { 
                          class: 'unselected',
                          'data-value': '1-2'
                        },    
                      },
                      {
                        type: 'div',
                        content: '未分类',
                        attributes: {
                           class: 'unselected',
                           'data-value': '1-3' 
                          }, 
                      }
                    ]
                  }
                ]
              },
             
              
            ]
          }
        ],
        script() {
          const selectWrapper = document.querySelector('.select');
          const selectTitle = document.querySelector('.selectTitle');
          const selectBody = selectWrapper.querySelector('.selectBody');
          const selectGroups = selectWrapper.querySelectorAll('.select-secondItems');
          const selectItems = selectWrapper.querySelectorAll('.unselected');

          // 点击总标题展示全部副标题
          // 添加总标题点击事件
          selectTitle.addEventListener('click',()=>{
            // 切换选择体样式类，展示出来selectBody
            selectBody.classList.toggle('allowAll');
            // 循环选择体里的选择组
            selectGroups.forEach(group => {
              // 每个组里面副标题只会有一个
              console.log(group.querySelector('.arrow-right'));
              let secondsTitle = group.querySelector('.arrow-right');
              // 让当前循环到的副标题展示出来
              secondsTitle.classList.toggle('allowAll'); 
              // 给所有副标题添加点击事件
              // 点击副标题展示当前副标题下的子内容
              secondsTitle.addEventListener('click',()=>{
                secondsTitle.classList.toggle('arrow-right'); 
                secondsTitle.classList.toggle('arrow-top');
                console.log(secondsTitle);
                items = group.querySelector('.select-items');
                items.classList.toggle('allowAll');
              });
            })
          })

          selectItems.forEach(item => {
            item.addEventListener('click', () => {
              // console.log(item.getAttribute('data-value'));
              item.classList.toggle('selected');
            })
          })

        },
        styles: `
                  .select {
                    position: relative;
                  }

                  .selectTitle{
                    display: flex;
                    width: 250px;
                    padding: 10px;
                    border-bottom: 1px solid lightgray;
                    align-items: center;
                    justify-content: space-between;
                  }

                  .iconDiv{
                    display: flex;
                    align-items: center;
                  }

                  .icon{
                    width: 17px;
                    height: 20px;
                    border: 1px solid black;
                    margin-left: 20px;
                  }

                  .allowAll{
                    display: none;
                  }

                  .selectBody{
                    position: absolute;
                    background-color: white;
                    z-index: 99;
                    top: 100%;
                    left: 0;
                    width: 250px;
                    height: auto;
                    margin-top: 10px;
                  }

                  .select-secondItems{
                    position: relative;
                    margin: 5px 2px;
                  }

                  .select-items div{
                    margin: 5px 0 0 40px;
                  }

                  .unselected::before{
                    content: ' ';
                    display: inline-block;
                    border: 1px solid black;      
                    width: 11px;  
                    height: 11px;  
                    margin: 0 8px 0 10px;
                  }

                  .selected::before{
                    content: '✓';
                    display: inline-block;
                    border: 1px solid black;      
                    width: 11px;  
                    height: 12px; 
                    text-align: center;
                    font-size: 11px;
                    margin: 0 8px 0 10px;
                  }

                  .arrow {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                  }
                  
                  .arrow::before {
                    content: '';
                    display: inline-block;
                    height: 0;
                    width: 0;
                    border: 7px solid transparent;
                  }
                  
                  .arrow-top::before {
                    border-top-color: black; /* 顶部边框变为黑色 */
                  }
                  
                  .arrow-right::before {
                    border-left-color: black; /* 左侧边框变为黑色 */
                  }
                `,
      },

    },
  });

  // 注册 customCheckbox 组件
  editor.BlockManager.add('select', {
    label: '下拉框',
    category: '其他类',
    media: '<svg t="1720776615133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23813" width="30" height="30"><path d="M839.68 445.44H614.4l112.64 122.88z" p-id="23814"></path><path d="M957.44 194.56H81.92c-10.24 0-20.48 10.24-20.48 25.6V742.4c0 10.24 10.24 20.48 25.6 20.48h875.52c10.24 0 25.6-10.24 25.6-20.48V220.16c-5.12-15.36-15.36-25.6-30.72-25.6z m-51.2 471.04c0 10.24-10.24 15.36-20.48 15.36H158.72c-10.24 0-20.48-5.12-20.48-15.36V291.84c0-10.24 10.24-15.36 20.48-15.36h727.04c10.24 0 20.48 5.12 20.48 15.36V665.6z" p-id="23815"></path></svg>',
    content: {
      type: 'select'
    },
  });
};